<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
    <title>fast-mpg</title>
    <link rel="stylesheet"
          th:href="@{/bootstrap-3.4.1/css/bootstrap.min.css}">

    <link rel="stylesheet"
          th:href="@{/bootstrapValidator.min.css}">
    <link rel="stylesheet"
          th:href="@{/table/bootstrap-table.min.css}">

    <link rel="stylesheet"
          th:href="@{/bootstrap-3.4.1/css/bootstrap-theme.min.css}">

    <script th:src="@{/jquery-3.6.0.min.js}"></script>
    <script th:src="@{/bootstrap-3.4.1/js/bootstrap.min.js}"></script>
    <script th:src="@{/bootstrapValidator.min.js}"></script>
    <script th:src="@{/table/bootstrap-table.min.js}"></script>

    <script th:src="@{/base.js}"></script>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <nav class="navbar navbar-default navbar-static-top">
                <div class="container-fluid">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <div class="navbar-brand bg-success">Fastmpg</div>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class=""><a href="/template">生成 </a></li>
                            <li class="active"><a href="/dbsource">数据源</a></li>
                        </ul>
                        <ul class="nav navbar-nav navbar-right">
                            <li class="text-primary"><a href="javascript:void(0);" onclick="sysAbout()" >关于</a></li>
                        </ul>
                    </div><!-- /.navbar-collapse -->
                </div><!-- /.container-fluid -->
            </nav>
        </div>
    </div>
    <div class="row">&nbsp;</div>
    <div class="row">&nbsp;</div>
    <div class="row">
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        数据源
                    </h3>
                </div>
                <div class="panel-body">
<!--                    <table class="table table-striped" data-toggle="table" data-url="/main/db-source/list">-->
                    <table class="table table-striped">
                        <thead>
                        <tr class="">
                            <th data-field="id">
                                #
                            </th>
                            <th data-field="alias">
                                别名
                            </th>
                            <th data-field="dbType">
                                数据库类型
                            </th>
                            <th data-field="url">
                                url
                            </th>
<!--                            <th data-field="port">-->
<!--                                port-->
<!--                            </th>-->
                            <th data-field="username">
                                username
                            </th>
                            <th data-field="password">
                                password
                            </th>
<!--                            <th data-field="database">-->
<!--                                database-->
<!--                            </th>-->
                            <th>
                                操作
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="ds,stat:${dslist}">
                            <td th:text="${ds.id}" width="5%">id</td>
                            <td class="text-wrap"  width="12%" th:text="${ds.alias}">本地</td>

                            <td width="10%">
                                <if th:if="${ds.dbType == 1}">MySql</if>
                                <if th:if="${ds.dbType == 2}">MS-SqlServer</if>
                                <if th:if="${ds.dbType == 3}">Oracle</if>
                            </td>

                            <td class="text-wrap"  width="35%" th:text="${ds.url}" style="word-break: break-all;">127.0.0.1</td>
<!--                            <td th:text="${ds.port}">3306</td>-->
                            <td th:text="${ds.username}" width="15%">admin</td>
                            <td th:text="${ds.password}" width="15%">123456</td>
<!--                            <td th:text="${ds.database}">test</td>-->
                            <td width="8%">
                                <button type="button" class="btn default btn-xs" th:onclick="|dsEdit(${ds.id})|" >
                                    <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                                </button>
                                <button type="button" class="btn btn-danger btn-xs" th:onclick="|dsDel(${ds.id})|">
                                    <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                                </button>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div></div>
        </div>
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title clearfix">
                        <span class="pull-left">编辑数据源</span>
                        <a onclick="formReset()"
                           class="glyphicon glyphicon-refresh pull-right" style="cursor:pointer;"
                           aria-hidden="true"></a>
                    </h3>
                </div>
                <div class="panel-body">
                    <form id="db_form" method="post">
                        <input type="hidden" id="ds_id" name="id">
                        <div class="form-group">
                            <label for="alias">别名</label>
                            <input type="text" class="form-control" id="alias" name="alias" placeholder="别名"
                                   data-bv-notempty="true"
                                   data-bv-notempty-message="不能为空">
                        </div>
                        <div class="form-group">
                            <label for="dbType">数据库类型</label>
                            <select class="form-control" id="dbType" name="dbType"
                                    data-bv-notempty="true"
                                    data-bv-notempty-message="不能为空">
                                <option value="1">MySql</option>
                                <option value="2">MS-SqlServer</option>
                                <option value="3">Oracle</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="url">url</label>
                            <textarea type="text" class="form-control" id="url" name="url" placeholder="url" rows="4"
                                   data-bv-notempty="true"
                                      data-bv-notempty-message="不能为空"></textarea>
                        </div>
<!--                        <div class="form-group">-->
<!--                            <label for="port">port</label>-->
<!--                            <input type="text" class="form-control" id="port" name="port" placeholder="port"-->
<!--                                   data-bv-notempty="true"-->
<!--                                   data-bv-notempty-message="不能为空">-->
<!--                        </div>-->
                        <div class="form-group">
                            <label for="username">username</label>
                            <input type="text" class="form-control" id="username" name="username" placeholder="username"
                                   data-bv-notempty="true"
                                   data-bv-notempty-message="不能为空">
                        </div>
                        <div class="form-group">
                            <label for="password">password</label>
                            <input type="text" class="form-control" id="password" name="password" placeholder="password"
                                   data-bv-notempty="true"
                                   data-bv-notempty-message="不能为空">
                        </div>
<!--                        <div class="form-group">-->
<!--                            <label for="database">database</label>-->
<!--                            <input type="text" class="form-control" id="database" name="database" placeholder="database"-->
<!--                                   data-bv-notempty="true"-->
<!--                                   data-bv-notempty-message="不能为空">-->
<!--                        </div>-->
                        <button type="button" onclick="subDBSource()" class="btn btn-primary">提交</button>
                        <button type="button" onclick="checkDBSource()" class="btn btn-default">测试连接</button>
                        <!-- <button type="submit" class="btn btn-default">Submit</button> -->
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    function subDBSource() {
        var form = $('#db_form');
        form.bootstrapValidator('validate');
        if (!form.data('bootstrapValidator').isValid()) {
            return false;
        }
        var data = formToJson(form.serializeArray());
        debugger
        $.ajax({
            type: "POST",
            url: "/main/db-source/add",
            contentType: "application/json; charset=utf-8",
<!--            dataType: "json",-->
            data: data,
            success: function (result) {
                alert(result);
                window.location.reload(false);
            },
            error : function() {
                alert("异常！");
            }
        });
    }

    function checkDBSource() {
        var form = $('#db_form');
        form.bootstrapValidator('validate');
        if (!form.data('bootstrapValidator').isValid()) {
            return false;
        }
        var data = formToJson(form.serializeArray());
        debugger
        $.ajax({
            type: "POST",
            url: "/main/db-source/check",
            contentType: "application/json; charset=utf-8",
            data: data,
            success: function (result) {
                alert(result);
            },
            error : function() {
                alert("异常！");
            }
        });
    }


    function dsEdit(id) {
        var form = $('#db_form');
        var valid = form.data('bootstrapValidator');
        if (valid) {
            valid.destroy();
        }
        $.ajax({
            type: "GET",
            url: "/main/db-source/get/" + id,
            dataType: "json",
            data: null,
            success: function (result) {
                $("#ds_id").val(result.id);
                $("#alias").val(result.alias);
                $("#dbType").val(result.dbType);
                $("#url").val(result.url);
                $("#port").val(result.port);
                $("#username").val(result.username);
                $("#password").val(result.password);
                $("#database").val(result.database);
            }
        });
    }
    function dsDel(id) {
        var flag = confirm("确定要删除吗?");
        if (flag) {
            $.ajax({
                type: "POST",
                url: "/main/db-source/del/" + id,
                success: function (result) {
                    alert(result);
                    location.reload(false);
                }
            });
        }
    }

    function formReset() {
        var form = $('#db_form');
        var valid = form.data('bootstrapValidator');
        if (valid) {
            valid.destroy();
        }
        $("#ds_id").val("");
        form[0].reset();
    }

</script>

</html>